<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
   <html>
<html lang="en">
<head>
<meta charset="UTF-8">
   <script>
        window.onload = function ()
        {
            var oBtn = document.getElementsByTagName("input");
            oBtn[10].onclick = function ()
			{
				alert("恭喜你，提交成功");
			};
        }
    </script>
<style type="text/css">
 .button{
	            background-color:#f66f6a;
	            color:white;
	            width: 400px;
	            height: 45px;
	            border:0;
	            font-size: 16px;
	            box-sizing: content-box;				
                border-radius: 5px;
            }
            .button:hover{
	            background-color: #a54b4a;
            }
.img1div{     
      width:250px;
      height:100px;
      border:1px solid;
  }  
.img1div img{width:250px;height:100px;}
  .box1{position:absolute;top:5px;left:650px;}
     .box2{position:absolute;top:72px;left:420px;}
    .box3{position:absolute;top:150px;left:400px;}
  .p1{color:red;}
  .box4{position:absolute;top:560px;left:480px;background-color:red;height:20px;}
  .box5{position:absolute;top:600px;left:520px;}
</style>

  
<title>woyaoxue</title>
</head>
<body>
    <body background="https://img1.baidu.com/it/u=3246628741,3439955235&fm=26&fmt=auto" style=" background-repeat:no-repeat ;background-size:100% 100%;
background-attachment: fixed;">
        <div class="img1div"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639187708&t=4529c1724e066c099d5103371cd10e11"><div>
          <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表格合并单元格--张凯</title>
</head>
<body>
  <div class="box1">
<h1>
  完善个人信息
    </h1>
  </div>
  <div class="box2">
    <h3>学霸一对一相信三人行必有师，我们郑重承诺您的信息将被严格保密请您放心填写</h3>
  </div>
 <div class="box3">
<table border="1">
<caption font-size:30px>通讯录</caption>
<tr>
  <td>*您的姓名:</td>
  <td colspan="2">&nbsp<input name="name">&nbsp如学生家长或学生本人姓名，如“李先生”“周同学”</td>
</tr>
<tr>
  <td>*手机号码:</td>
  <td>&nbsp<input name="phone" type="password">&nbsp电话号码仅站内工作人员可看，请放心填写</td>
</tr>
  <tr>
    <td>*你的QQ：</td>
    <td>&nbsp<input name="qq" type="password">&nbspQQ号码仅站内工作人员可看，请放心填写</td>
  </tr>
  <tr>
    <td>您的性别：</td>
    <td><input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female" /> Female</td>
  </tr>
   <tr>
    <td>目前学历：</td>
    <td>&nbsp<input id="type" type="text" list="typelist" placeholder="请选择你的学历">
<datalist id="typelist">
　　<option>本科</option>
　　<option>专科</option>
</datalist></td>
  </tr>
   <tr>
    <td>我的荣誉：</td>
    <td>&nbsp<input name="honor"></td>
  </tr>
  <tr>
    <td>自我评价：</td>
    <td>&nbsp<input name="pingjia"></td>
  </tr>
   <tr>
     <td><p class="p1">当前位置：</p></td>
    <td>&nbsp<input name="ditu" type="button" value=" 点击标记"></td>
  </tr>
</table>
  </div>
  <div class="box4">
        <input type="checkbox">&nbsp因虚假消息而引发的任何后果，一律由填表人负责，与本站无关
</div>
   <div class="box5"><input type="submit" class="button" value="确认" name="zhidao"/>

</body>
          </html>